<template>
  <div class="share-value">
    <c-title :hide="false" :text="infoList.name"></c-title>
    <div class="top">
      <div class="title">{{infoList.name}}</div>
      <div class="text">{{infoList.nums}}</div>
    </div>
    <div class="contain">
      <van-tabs v-model:active="active" class="tabs-style" @change="changeTabs" title-active-color="#ffa822" color="#ffa822">
        <van-tab :title="cItem.title" :name="cItem.id" v-for="(cItem, cIndex) in vanTab" :key="cIndex">
          <d-list :loading="loading" :finished="finished" @load="onLoad">
            <div v-if="active == 1">
              <div class="share-subsidy" v-for="(item,index) in dataList" :key="index">
                <div class="top-pane">
                  <span class="left">注册社员ID: {{item.child_id}}</span>
                  <span class="right">+{{item.change_value}}</span>
                </div>
                <div class="bottom-time">{{item.created_at}}</div>
              </div>
            </div>
            <div v-if="active == 2">
              <div class="distribution-details" v-for="(item,index) in dataList" :key="index">
                <div class="top-pane">
                  <span class="left">{{item.order_sn}}</span>
                  <span class="right">{{item.change_value}}</span>
                </div>
                <div class="bottom-time">
                  <span>粉丝消费ID: {{item.child_id}}</span>
                  <span>{{item.created_at}}</span>
                </div>
              </div>
            </div>
          </d-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import index_controller from "./index_controller";
export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-tabs--line .van-tabs__wrap {
  border-radius: 5rem;
}

.share-value {
  padding: 0.6rem;

  .top {
    background-image: linear-gradient(#ffc158, #ffb843, #ffab29);
    height: 8rem;
    width: 100%;
    border-radius: 0.5rem;

    .title {
      display: flex;
      padding: 1.1rem 0 0 1.2rem;
      color: white;
      font-size: 0.9rem;
    }

    .text {
      line-height: 4rem;
      color: white;
      font-size: 1.3rem;
    }
  }

  .contain {
    background: white;
    margin: 1rem 0;
    border-radius: 0.5rem;

    .share-subsidy {
      padding: 0.8rem 0.2rem;
      border-bottom: 1px solid #f5f5f6;
      margin: 0 0.53rem;

      .top-pane {
        display: flex;
        justify-content: space-between;
        font-size: 0.5rem;
      }

      .bottom-time {
        color: #bcbcbc;
        display: flex;
        margin-top: 0.5rem;
        font-size: 0.3rem;
      }
    }

    .distribution-details {
      padding: 0.8rem 0.2rem;
      border-bottom: 1px solid #f5f5f6;
      margin: 0 0.53rem;

      .top-pane {
        display: flex;
        justify-content: space-between;
        font-size: 0.5rem;
      }

      .bottom-time {
        color: #bcbcbc;
        display: flex;
        margin-top: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.3rem;
      }
    }
  }
}
</style>
